<html xmlns="http://www.w3.org/1999/xhtml" id="designers"
      xmlns:d="docbook">
<head>
  <title>デザイナのためのLaszlo</title>
  <othercredit role="translator">
	<firstname>s</firstname>
	<surname>OKA</surname>
        <contrib>2005/04/12　翻訳初版</contrib>
  </othercredit>
  <othercredit role="translator">
 	<firstname>Manabu</firstname>
	<surname>Togawa</surname>
        <contrib>2005/12/16　3.1対応。HTML化。</contrib>
  </othercredit>

</head>

<body>

<h1>デザイナのためのLaszlo</h1>

<h2>概要</h2>
<p>
この章ではデザイナの視点からLaszloプラットフォームについて論じています。
革新的なインターネットアプリケーションを構築するにあたり、デザイナとエンジニアを手助けしてくれるLaszloの可能性について説明しましょう。
</p>
<p>
Laszloのテクノロジにより、WEBアプリケーションデザイナは、見慣れた静的で直線的、ページごとの遷移といった制限から解放されます。動的、データ駆動型、簡素で、インテリジェントなUIというあなたの理想は現実のものとなります。しかし、それには少し考え方を変えてみる必要があります。なぜならLaszloで可能なことは、ほとんどの他の技術で不可能だからです。とはいえ、Laszloプロジェクトで有能なデザイナになるためにコードの書き方を学ぶ必要はありません。LZX言語のわかりやすい基本構造と機能は、作業への取り組み方法の理解を手助けしてくれます。そのためにも、少なくとも<a href="${tutorials}">チュートリアル</a>のいくつかに取り組んでみることをお勧めします。
</p>
<p>
プロジェクトに取り組みにあたって、マニュアルを取り出さなくても、楽々と直感的に使うことのできるデスクトップ・アプリケーションを考えてみてください。次に、Flashサイトの美しいUIを思い起こしてください。そして想像してみましょう、これが完璧なデータ駆動で、拡張可能で、簡単に変更できることを。すこし時間をとってこの問題に想像をめぐらしてみてください。
違う方向から眺め、断面にそってスライスし、断片を再構築してみましょう。そして、そこからの気づきをデザインを駆り立てるためにつかってください。
</p>

<h2><glossterm>ページ切り替え</glossterm>に代わる<glossterm>連続的なインタラクション</glossterm></h2>

<p>
エンドユーザーによって遂行される(複数の)タスク、完了までの流れを考えてください。プロジェクト構築にLaszloを使う大きな利点の一つは、インタラクションとプレゼンテーションを巡る情報を統合する力です。目的に達するまでに二十ものHTMLページを通る、非常に辛抱強いユーザー用のプロセスは、今や少しの必要なだけの情報が、エレガントに表示される、単一"ページ"のフレームワーク内でデザインされるようになります。
この情報を使いやすく、状況に応じた形で、複雑さなしに提供できる力は、成功するアプリケーションの基盤です。
</p>

<img class="illustration" src="images/design_sec2_ill.jpg"
     title="連続的なインタラクション"/>

<h2>デザインプロセス</h2>
<p>
デザインのプロセスは経験やチームの背景によって独特なものもです。コードを書くデザイナと、デザインセンスのあるエンジニアは共通するスキルがあるため、しばしば厳密に担当を分けないこともあります。しかし、問題の分析、ブレーンストーミング、解決方法の共通の理解と同意のため、すべてのチームがこれらに時間を割く必要があります。
</p>
<p>
このプロセスには実績のある手順があります。</p>
<ol>
	<li><p><dfn>ワイヤーフレーム</dfn>。 レイアウトのワイヤーフレーム例は、全体としての部分を視覚化する手始めになります。これらは、ナビゲーション、ブランド設定、コンテンツなどを含んだUIの配置に関する基本定義です。</p></li>
	<li><p><dfn>ストーリーボード</dfn>。一度構成が決まれば、一般的、詳細、両方のタスクフローを示したストーリーボードはインタラクティビティの目標に磨きをかけ、話しあう手助けになります。
ストーリーボードは簡単なフローチャートのようなものから始めることができ、各要素のそれぞれの状態の図へと発展させます。問題と解決方法の複雑さが、どれだけストーリーボードが詳細であるべきかを決定するでしょう。</p></li>
	<li><p><dfn>アニメーション</dfn>。機能性と手順を示す、単純で線形なアニメーションは、エンジニアとデザイナの両方がインタラクティブな要素の評価と実験に役立ちます。</p></li>
	<li><p><dfn>プロトタイプ作成</dfn>。一度これらすべて（またはサブセット）が計画され、合意がまとまれば、エンジニアチームはプレースホルダ・アートワークやLZXの基本図形を用いて、フレームワークを組み立て始めることができます。
</p></li>
</ol>

<img class="illustration" src="images/design_sec3_ill.jpg"
     title="デザインプロセス"/>
 
<h2>
どう見える?
</h2>
<p>
エンジニアがアプリケーションの基盤を開発するのに忙しい間、デザイナはアプリケーションの"見た目"に再び焦点を合わせることができます。
コーディングを始める前に完全な設計ができていることを好むデザイナもいますが、締め切りと繰り返される変更の可能性という現実は、ビジュアルなデザインと作成は、ほとんどの場合コーディング作業と平行することを意味します。
要素ごとのデザイン決定がなされる必要があります。
ユーザーは従来のUI要素の方が安心でしょうか？それとも表現、操作、表示の新しい方法を試してみる余地がありますでしょうか？ルック&amp;フィールに関する総合試験は、もっとも快適なアプリケーションであるよう設計されるべきです。
</p>
<p>ビットマップ、ベクターツールどちらも同様に表示され、どちらのフォーマットもアートリソースの作成に活用できます。
</p>
 
<h2>
リソースの利用
</h2>
<p>
リソースはアプリケーションの見た目を構築するために、LZXコードに利用されるアセットです。LZXはビットマップ(GIF、JPEG、PNG)とベクター(SWF)を含めた数多くのイメージフォーマットをサポートしています。
アニメーションとビデオ(複数フレームのSWFファイルの形式)とオーディオ(MP3ファイル)は同様にアプリケーションに含めることができます。リーソースはたいてい、様々なUIとその状態(アップ、ダウン、ロールオーバーなど)を作成するために組み立てられた複数の部品から構築されています。これらの状態を実現するため、LZXはマルチフレームのリソースを提供します。また一つのリソースを使い、コードを使って見た目を変更(色付け、リサイズ、再配置など)することもできます。
LZX言語ではリソースの色、彩度、明度、透明度はプログラム的に変更することができます。
</p>

<img class="illustration" src="images/design_sec5_ill.jpg"
     title="リソースの利用"/>

<h2>
ビットマップ vs. ベクターベース
</h2>
<p>
ビットマップかベクターどちらを使うかという議論は、基本的にデザインによって決まります。階調、陰影、透明度が使われた複雑でサイズが固定のオブジェクトなら、ビットマップリソースの方が適当です。ベクターファイルは通常、より小さいファイルサイズですが、描画に多くのプロセスパワーが必要となります。他の主な考慮点として、そのリソースはリサイズが必要か、ということです。もしリソースの拡大縮小が必要であればベクターファイルをつかうべきでしょう。画質の劣化なしに拡大縮小することができます。ビットマップファイルを元のサイズよりも拡大すると、補正が起こり画質は落ちます。一般的にはSWFファイルが最も柔軟性があります。言うまでもなく、SWFファイルを作成するためのツールはMacromedia Flashですが、Adobve Illustratorのような多くのベクターベースのアプリケーションは、このフォーマットでの書き出しに対応しています。
オプションがあれば、SWFファイルはバージョン5.0として保存する必要があります。Illustrator10での書き出しにはそのようなオプションはありませんが、ディフォルトで5.0が使われます。</p>
<note>"stop"コマンドを除いて、LZXに含めるSWFファイルにはFlashのActionScriptwo使うべきではありません。</note>

<h2>
フォント
</h2>
<p>
LPSはすべてのTrueTypeフォーマット(TTF)に対応しています。埋め込みフォントは、すべてのブラウザ、OSに渡って、アプリケーションの見た目を一致させることができます。</p>
 
<p>LPSのディフォルトフォントはUltra Pixelフォント"Verity"です。Fashプラグイン(LZXファイルのレンダリング用)は小さなアウトラインフォントの表示が綺麗ではないので、デザイナはしばしば、(たいてい12pt以下の)小さなサイズではビットマップ(別名ピクセル)フォントを使います。ビットマップフォントはアンチエイリアスが行われないため、レンダリングの問題が回避できます。きわめて読みやすいですが、従来のビットマップフォントは、古い活字の雰囲気に欠けています。Ultra Pixelフォントは固定アンチエイリアスを採用しています。これにより読みやすさを最大限にしつつ、文字の滑らかさと、はっきりした形を保っています。VerityはBitstreamアウトラインフォントの"Vera"(これもLPSに含まれています)を真似てデザインされています。
</p>

<img class="illustration" src="images/design_sec7_ill.jpg"
     title="フォント"/>

<p> 大きなサイズではVeraはVerityとシームレスに統合できます。Verityのようなビットマップフォントでは、8ptが指定されたときのみ正しく描画されます。サイズを変更するにはVerity TTFフォント(9ptまたは11pt)を使う必要があります。
Verityはアクセント記号のない文字サブセットのみを含んでいます。Windowsの完全なWestern UnicodeフォントセットにはVerityPlusを使ってください。これはアクセント記号のあるヨーロッパ文字を含んでいます。
BitstreamフォントのVeraはGnomeプロジェクト用のオープンソースフォントとしてリリースされています。Ultra PixelフォントVerityはTruth in Designが作成した技術を使ってChristopher Loweryによって作成されています。</p>
<p>
フォントについては <xref linkend="../guide/fonts"/>でより詳しく説明しています。
</p>
 
<h2>Laszloコンポーネントデザインガイド</h2>
<p>ユーザーインターフェイスコンポーネントのデザインについての詳細は<a href="../component-design/index.html">Laszloコンポーネントデザインガイド</a>をお読み下さい。
</p>


<!--=========================================================================-->
<!-- Major sub-heads in h2, etc                                                               -->
<!--=========================================================================-->
<fixme>

    Some thoughts on how Laszlo is different as a web design 
 technology:
   
    * You have complete control of the end user experience. Most 
 web
  design
    tech causes the app to look different depending on the OS and
    browser. This is often a design challenge that can lead to
  unwanted
    compromises. With Laszlo, you have control of every pixel and
  gesture.
   
    * fast prototyping: Laszlo offers a complete set of UI 
 components
  that
    includes UI controls supported by HTML (radio buttons, 
 checkboxes,
  etc.)
    along with standard desktop UI (windows, menus, tree control, 
 tabs)
  and
    more. These components in the context of a concise declarative
  XML for
    application layout and event-based interaction login allow for 
 high
    productivity.
   
    * object oriented programming: You can organically move from
  prototyping
    to serious application development though Laszlo's powerful 
 class
    declarations that support full inheritance. Oliver Steele has 
 an
    interesting blog entry with notes on "Instance-First 
 Development"
  which
    provides some details on this topic:
    
 http://www.osteele.com/archives/2004/03/classes_and_prototypes.html
   
    * in-page transactions: Laszlo applications do not require 
 a "page
    refresh" when you get data from the server. This allows for 
 data
  to be
    delivered to the user in a way that is integrated seamlessly 
 into
  the UI.
    It also allows for "ambient" data -- data updates asynchronously
  and is
    provided in context.
   
    If you check out the demos at 
 http://www.laszlosystems.com/demos/ ,
  I think
    you will quickly see that the user experience presented by a
  typically
    Laszlo app is substantially different from your typical web app.
  Above,
    I've tried to capture some key differences in the development
  process as well.


</fixme>


</body>
</html>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2001-2004 Laszlo Systems, Inc.  All Rights Reserved.              *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->
